<template>
  <div>
    <el-row>
      <el-col :span="2">
        <el-button @click="newNotice" type="primary"
                   size="small" icon="el-icon-document-add" round>新的通知
        </el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="2">
        <div style="font-size: 14px;color: #a5a5a5">通知列表</div>
      </el-col>
    </el-row>
    <div v-for="(item,index) in noticeList" :key="index">
      <el-row style="margin-top: 10px">
        <el-card shadow="hover" style="text-align: left" @click.native="goDetails(item.noticeId)">
          <el-row>
            <el-col :span="1" style="margin-left: 15px;margin-top: 15px">
              <el-avatar src="https://www.ketangpai.com/images/ic_bulletin.svg"></el-avatar>
            </el-col>
            <el-col :span="11" style="margin-left: 20px">
              <el-row>
                <el-col :span="6">
                  <span style="font-size: 16px">{{ item.noticeTitle }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="margin-top: 5px">
              <span style="font-size: 12px;color: #a5a5a5">状态 : {{
                  item.status === 1 ? '已保存' : item.status === 2 ? '已发布' : item.status === 3 ? '已结束' : '未知'
                }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" style="margin-top: 5px">
                  <span style="font-size: 12px;color: #a5a5a5">保存时间 : {{ item.createTime }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16" style="margin-top: 5px">
                  <span style="font-size: 12px;color: #a5a5a5">持续时间 :
                    {{ item.noticeStartTime }} - {{ item.noticeEndTime }}
                  </span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2" :offset="9" style="margin-top: 25px">
              <el-dropdown v-if="item.status !== 2">
                <span class="el-dropdown-link">
                  <el-row>
                    <i class="el-icon-more el-icon--right"></i>
                  </el-row>
                  <el-row>
                    <span>更多</span>
                  </el-row>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-edit-outline"
                                    @click.native="goDetails(item.noticeId)">编辑
                  </el-dropdown-item>
                  <el-dropdown-item v-if="item.status === 1" icon="el-icon-s-promotion"
                                    @click.native="publish(item.noticeId,item.noticeStartTime,item.noticeEndTime)">发布
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-remove-outline"
                                    @click.native="remove(item.noticeId)">删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseNotice',
  data () {
    return {
      courseId: undefined,
      noticeList: [],
    }
  },
  methods: {
    remove (noticeId) {
      this.$http.delete('/api/notice/' + noticeId).then(res => {
        if (res.data.code === 2000) {
          this.$message({
            type: 'success',
            message: '通知删除成功!',
            duration: 1500,
          })
          this.init()
        } else {
          this.$message({
            type: 'error',
            message: '通知删除失败!',
            duration: 1500,
          })
        }
      })
    },
    publish (noticeId, noticeStartTime, noticeEndTime) {
      this.$confirm('通知持续时间为( ' + noticeStartTime + ' 至 ' + noticeEndTime + ' )', '通知发布', {
        confirmButtonText: '确定发布',
        cancelButtonText: '取消发布',
      }).then(() => {
        this.$http.post('/api/notice/publish/' + noticeId).then(res => {
          if (res.data.code === 2000) {
            this.$message({
              type: 'success',
              message: '通知发布成功!',
              duration: 1500,
            })
            this.init()
          } else {
            this.$message({
              type: 'error',
              message: '通知发布失败!',
              duration: 1500,
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消发布通知',
          duration: 2000,
        })
      })
    },
    goDetails (noticeId) {
      this.$router.push({
        name: 'noticeDetails',
        params: { noticeId: noticeId }
      })
    },
    newNotice () {
      this.$router.push('/course/noticeDetails')
    },
    init () {
      this.$http.get('/api/notice/list/' + this.courseId).then(res => {
        this.noticeList = res.data.result
      })
    },
  },
  created () {
    this.courseId = this.$store.state.course.courseId

    this.init()
  }
}
</script>

<style scoped>

</style>
